<template>
  <template v-for="m in menuData">
    <!-- 有子菜单 -->
    <el-sub-menu v-if="m.children && m.children.length" :index="m.path">
      <template #title>
        <el-icon>
          <component :is="m.icon"></component>
        </el-icon>
          <!-- <font-awesome-icon icon="house" style="margin-right: 6px;margin-left: 6px;"></font-awesome-icon> -->
        <span>{{ m.title }}</span>
      </template>
      <MenuTree :menuData="m.children"></MenuTree>
    </el-sub-menu>
    <!-- 无子菜单 -->
    <el-menu-item v-else :index="m.path">
      <el-icon>
        <component :is="m.icon"></component>
      </el-icon>
      <span>{{ m.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup>

defineProps(["menuData"]);

</script>

<style lang="less" scoped></style>
